<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
    
     <!-- 导航栏 -->
    <div class="nav">
        <img src="iamge/标志.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer这个标签仅仅用于占位，把这几个a标签挤到最右边去 -->
        <div class="spacer"></div>
        <!-- 在此用相对路径的写法 -->
        <!-- 这是静态的html -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <!-- 这是动态的 servlet 页面 -->
        <a href="logout">注销</a>
    </div>


    <!-- 页面主体部分 -->
    <div class="container">
        <!-- 左侧边信息 -->
        <div class="container-left">
            <!-- 此处引入card类，是为了只是显示用户信息的部分（如背景，若是选container-left ，则背景颜色就是和父级元素一样高了） -->
            <div class="card">
                <img src="iamge/宝儿姐.jpg" alt="">
                <h3>宝儿姐的贴身保镖</h3>
                <a class="link" href="https://www.baidu.com/" target="_blank">github地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>    
            </div>
        </div>
            
        <!-- 右侧边信息 -->
        <div class="container-right">
            <h2 class="title">
                <!-- 我的第一篇博客 -->
            </h2>
            <div class="date">
                <!-- 2023-5-8 -->
            </div>
            <!-- 博客正文, 为了配合 editormd 进行格式转换, 此处务必改成 id  -->
            <div id="content">

            </div>
        </div>
    </div>

     <!-- 跳转到博客详情页之后，发送一个ajax  get请求，
        从服务器获取到当前博客的详细内容，在构造到页面上显示出来 -->
    <script src="js/jquery.min.js"></script>
    <!-- 要保证这几个 js 的加载在 jquery 之后. editor.md 依赖了 jquery -->
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script>
        $.ajax ({
            type: 'get',
            // 注意 location.search 的作用就是获取到当前页面上的 query string   
            // 同时他获取到的时候前面加的有一个 ？ 我们就不用手动添加了
            // location 是js 中的一个全局对象，类似于 document
            url:'blog' + location.search,
            success: function(body) {
                // 在此处获取到返回的响应，构造到页面上显示出来
                // 更新标题
                let titleDiv = document.querySelector('.container-right .title');
                titleDiv.innerHTML = body.title;
                // 更新时间
                let timeDiv = document.querySelector('.date');
                timeDiv.innerHTML = body.postTime;

                // 获取内容
                // 此处不应该直接把博客正文填充到这个标签里~~
                // 而是经过markdown渲染过的
                // 
                // 此处有这个 api 注意学习一下
                // 
                // editormd.markdownToHTML('content',{ markdown: body.content});
                editormd.markdownToHTML('content', { markdown: body.content });
            }
            // 注意这个地方 到底有没有 ;    板书上是没有的
        })

        function checkLogin() {
            $.ajax({
                type: 'get',
                url: 'login',
                success: function(body) {
                    // 返回的 json 格式的字符串，此处已经被jquery 自动解析成js 对象
                    if (body.userId && body.userId > 0) {
                        // 登录成功!!
                        console.log("当前用户已经登录!!");
                        
                    } else {
                        // 当前未登录
                        // 强制跳转到登录页. 
                        // js中 双引号和单引号没区别，js中一般用单引号
                        location.assign('login.html');
                    }
                }
            });
        }

        // 注意还需要调用
        checkLogin();

        // 函数定义
        function getAuthor() {
            $.ajax({
                type: 'get',
                url: 'author' + location.search,
                // 把 username 设置到界面上
                success: function(body) {
                    let h3 = document.querySelector('.container-left .card h3');
                    h3.innerHTML = body.username;
                }
            });
        }

        // 函数调用
        getAuthor();
    </script>
</body>
</html>